<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>选择城市</title>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/base.css"/>
		<style type="text/css">
			header{
				width: 100%;
				height: 40px;
				text-align: center;
				line-height: 40px;
				font-size: 18px;
				background: #FFFFFF;
				position: relative;
			}
			.back{
				width: 33px;
				height: 33px;
				display: inline-block;
				position: absolute;
				background: url(${BASE_PATH}/static/app/img/back.png) no-repeat 0 5px;
				background-size:40%;
				left: 15px;
			}
			.now{
				margin-top: 15px;
				width: 100%;
				height: 75px;
				background: #FFFFFF;
			}
			.tit{
				display: inline-block;
				width: calc(100% - 30px);
				margin-left: 15px;
				height: 35px;
				line-height: 35px;
				font-size: 16px;
				color: #999;
			}
			.place{
				width: 65px;
				height: 25px;
				display: inline-block;
				border: 1px solid #999;
				text-align: center;
				line-height: 25px;
				margin-left: 15px;
				border-radius:5px;
				color: #666;
			}
			.more ul{
				width: 100%;
				background: #FFFFFF;
				font-size: 16px;
			}
			.more ul li{
				width: calc(100% - 15px);
				height: 34px;
				margin-left: 15px;
				line-height: 35px;
				border-bottom: 1px solid #ddd;
				color: #666;
			}
			/* a:link {color: red;}
			a:visited {color: blue;} */
			a:hover{color: #bae5f0;}
			/* a:active{color: prey;} */
		</style>
	</head>
	<body>
		<header>
			<span class="back" onclick="javascript:history.go(-1);"></span>
			<span class="tital">选择城市</span>
		</header>
		<div class="now">
			<span class="tit">当前城市</span>
			<span class="place">${cityName }</span>
		</div>
		<div class="more">
			<span class="tit">已开通城市</span>
			<ul>
				<c:if test="${fn:length(cityList) > 0}">
					<c:forEach var="ad" items="${cityList}" varStatus="s">
						 <li onclick="choose(${ad.id})"><a>${ad.name }</a></li>
					</c:forEach>
				</c:if>
			</ul>
		</div>
		<script src="${BASE_PATH}/static/app/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
				function choose(cityId){
					window.location.href="${BASE_PATH}/choose/"+cityId;
				}
		</script>
	</body>
</html>
